<template>
  <div class="continal">
    <!-- 顶部按钮操作区 -->
    <el-row>
      <el-col :span="5">
        <el-button type="primary" @click="addtable"><b>+</b> 新建</el-button>
        <el-button v-if="arr.length > 0" type="primary">删除</el-button>
        <el-button v-else disabled>删除</el-button>
        <el-button type="primary">刷新</el-button>
      </el-col>
    </el-row>
    <!-- 下拉菜单区域 -->
    <el-row :gutter="20" style="margin-top: 30px;">
      <el-col :span="4">
        <!-- 输入名称/编码 -->
        <el-input v-model="name" placeholder="名称/编码" />
      </el-col>
      <!-- 选择仓库 -->
      <el-col :span="4">
        <el-select v-model="cangku" placeholder="请选择仓库" style="width: 100%;" @change="loloid">
          <el-option v-for="item in cangkulist" :key="item.Id" :label="item.Name" :value="item.Id" />
        </el-select>
      </el-col>
      <!-- 选择上下料点类型 -->
      <el-col :span="4">
        <el-select v-model="pointtype" placeholder="请选择上下料点类型" style="width:100%;">
          <!-- 获取上下料点类型 -->
          <el-option v-for="item in typeList" :key="item.Id" :label="item.Name" :value="item.Id" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="inquire">查询</el-button>
        <el-button @click="clearthis">重置</el-button>
      </el-col>
    </el-row>
    <!-- table表格区域 -->
    <el-row style="margin-top:30px;">
      <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="Name" label="名称" width="200" />
        <el-table-column prop="Code" label="编码" width="200" />
        <el-table-column prop="Storage.Name" label="仓库" width="200" />
        <el-table-column prop="Laneway.Name" label="巷道" width="200" />
        <el-table-column prop="Type" label="类型" width="200">
          <template slot-scope="scope"> {{ scope.row.Type == "In" ? '只进' : scope.row.Type =="OutBack" ? '出回' : scope.row.Type =='InOut' ? '进出' : '只出' }}</template>
        </el-table-column>
        <el-table-column prop="IsEnable" label="启用" width="200">
          <template slot-scope="scope"><span :class="[scope.row.IsEnable == false ? 'isno' : 'isyes' ]">{{ scope.row.IsEnable == false ? '否' : '是' }}</span></template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <template v-if="scope.row.IsEnable === false">
              <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="open(scope.row)">启用</el-button>
              <el-button type="text" size="small" @click="aboutwl(scope.row)">关联物料</el-button>
            </template>
            <template v-else>
              <el-button type="text" size="small" @click="stopthis(scope.row)">停用</el-button>
              <el-button type="text" size="small" @click="aboutwl(scope.row)">关联物料</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 新建物料点dialog -->
    <el-dialog :label-position="labelPosition" title="新增货区" :visible.sync="showDialog" width="40%">
      <el-form ref="formLabelAlign" :label-position="labelPosition" label-width="80px" :model="formLabelAlign" :rules="rules">
        <el-form-item label="仓库" style="width: 100%;" prop="StorId">
          <!-- 仓库组件 -->
          <el-select v-model="formLabelAlign.StorId" placeholder="请选择仓库" style="width: 100%;" @change="loloid">
            <el-option v-for="item in cangkulist" :key="item.Id" :label="item.Name" :value="item.Id" />
          </el-select>
        </el-form-item>
        <el-form-item label="巷道" prop="LaneId">
          <!-- 巷道 -->
          <el-select v-model="formLabelAlign.LaneId" placeholder="请选择巷道" style="width: 100%;">
            <el-option v-for="item in hallList" :key="item.Id" :label="item.Name" :value="item.Id" />
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="Name">
          <!-- 名称 -->
          <el-input v-model="formLabelAlign.Name" placeholder="名称">名称</el-input>
        </el-form-item>
        <el-form-item label="编码" prop="Code">
          <el-input v-model="formLabelAlign.Code" placeholder="请输入编码">编码</el-input>
        </el-form-item>
        <el-form-item label="类型" prop="Type">
          <el-select v-model="formLabelAlign.Type" placeholder="请选择上下料点类型" style="width: 100%;">
            <el-option v-for="item in typeList" :key="item.Id" :label="item.Name" :value="item.Code" />
          </el-select>
        </el-form-item>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </el-form>
    </el-dialog>
    <!-- 点击启用dialog -->
    <el-dialog
      title="确认启用该料点嘛"
      :visible.sync="opendialog"
      width="30%"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="isok">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击停用的dialog -->
    <el-dialog
      title="确认停用该料点嘛"
      :visible.sync="stopdialog"
      width="30%"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="colsestop">取 消</el-button>
        <el-button type="primary" @click="isyes">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击删除的dialog -->
    <el-dialog
      title="确认删除该料点嘛"
      :visible.sync="deldialog"
      width="30%"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="colsedel">取 消</el-button>
        <el-button type="primary" @click="delyes">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 关联物料 -->
    <div class="contia">
      <el-drawer title="关联物料清单" :visible.sync="opdrawer" size="50%">
        <div class="contia">
          <!-- 关联物料上方操作按钮 -->
          <el-row>
            <el-col>
              <el-button type="primary" @click="addglwl"><b>+</b> 添加</el-button>
              <el-button type="primary">删除</el-button>
              <!-- <el-button v-else disabled>删除</el-button> -->
              <el-button type="primary">刷新</el-button>
            </el-col>
          </el-row>
          <!-- 关联物料下拉菜单 -->
          <el-row :gutter="20" style="margin-top: 30px; width: 100%;">
            <el-col :span="6">
              <el-input v-model="glwuliao" placeholder="物料" />
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="findglwuliao">查询</el-button>
              <el-button @click="delglwuliao">重置</el-button>
            </el-col>

          </el-row>
          <!-- 关联物料table表格 -->
          <el-row :gutter="20" style="margin-top: 30px; width: 100%;">
            <el-table ref="wuliaotable" :data="wuliaoData" style="width: 100%" border>
              <el-table-column type="selection" width="55" />
              <el-table-column fixed prop="PB_Material.Code" label="物料编码" width="200" />
              <el-table-column fixed prop="PB_Material.Name" label="物料名称" width="200" />
              <el-table-column fixed prop="PB_Material.Spec" label="物料规格" width="200" />
              <el-table-column align="" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deldia(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>
      </el-drawer>
    </div>
    <!-- 点击删除dialog -->
    <el-dialog
      title="确认删除该关联物料嘛"
      :visible.sync="delglDialog"
      width="30%"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="closedelDialog">取 消</el-button>
        <el-button type="primary" @click="delglwl">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 点击添加按钮弹出dialog -->
    <el-dialog :label-position="labelPosition" title="物料选择" :visible.sync="wuliaoDialog" width="64%">
      <el-row :gutter="20" style="margin-top: 30px;">
        <el-col :span="4">
          <el-select ref="selectTree" v-model="Text" placeholder="物料类型" :value="newvalue">
            <el-option v-for="(item, index) in wuliaoType" :key="index" :label="item.Text" :value="item.Id" />
            <el-tree
              ref="selecteltree"
              :data="wuliaoType"
              node-key="wuliaoType.ID"
              :props="defaultProps"
              highlight-current
              :current-node-key="wuliaoType.value"
              :expand-on-click-node="true"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </el-select>
        </el-col>
        <!-- 输入物料名称 -->
        <el-col :span="5">
          <el-input v-model="materielname" style="width: 100%;" placeholder="物料名称\编号\条码" />
        </el-col>
        <!-- 选择客户 -->
        <el-col :span="6">
          <el-input v-model="materielnumber" style="width: 100%;" placeholder="客户\供应商名称或编码" />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="wuliaofind">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-col>
      </el-row>
      <el-row>
        <!-- 添加关联物料table -->
        <el-table ref="guanlianwuliaotable" :data="guanlianwuliaoData" style="width: 100%" border @selection-change="SelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column fixed prop="Name" label="物料名称" style="width: 20%;" />
          <el-table-column fixed prop="Code" label="物料编码" style="width: 20%;" />
          <el-table-column fixed prop="MaterialType.Name" label="物料类别" style="width: 20%;" />
          <el-table-column fixed prop="BarCode" label="条码" style="width: 15%;" />
          <el-table-column fixed prop="SimpleName" label="物料简称" style="width: 10%;" />
          <el-table-column fixed prop="Spec" label="物料规格" style="width: 10%;" />
        </el-table>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button @click="closeThis">取消</el-button>
        <el-button type="primary" @click="addthetb">选择</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getWarehouseList, getWuliaoType, getQueryList } from '@/api/huoqu'
import { getPiontList, getEnable, getType, getHall, addPoint, findPoint, delPoint, getTheData, editPoint, getMaterial, addMaterial, findMaterial, delMaterial } from '@/api/shangxialiao'
export default {
  data() {
    return {
      name: '', // 顶部下拉菜单双向绑定名称
      cangku: '', // 顶部下拉菜单双向绑定仓库
      pointtype: '', // 顶部下拉菜单双向绑定料点类型
      cangkulist: [{}], // 仓库下拉菜单数据
      typeList: [{}], // 顶部下拉菜单料点类型数据
      arr: [], // 选择的料点数据
      hall: '', // 顶部下拉菜单双向绑定巷道数据
      hallList: [{}], // 巷道数据
      tableData: [{}], // 上下料点表格数据
      tableArr: [{}], // 选择的数据
      opendialog: false, // 启用dialog
      stopdialog: false, // 停用dialog
      openId: '', // 启用dialog的id
      stopId: '', // 停用dialog的id
      selectStoryId: '', // 选择仓库的id
      deldialog: false, // 删除dialog
      delId: '', // 删除dialog的id
      tableValue: {
        pageIndex: 1,
        pageRows: 10,
        search: {
          keyword: '',
          storId: '',
          type: ''
        }
      }, // 上下料点表格获取
      showDialog: false, // 新建物料弹出框
      labelPosition: 'right', // 表单文字对齐方式
      formLabelAlign: {
        id: '', // 主
        StorId: '', // 仓库
        LaneId: '', // 巷道
        Name: '', // 名称
        Code: '', // 编码
        Type: '' // 类型
      }, // 新建物料表单数据
      rules: {
        StorId: [{ required: true, message: '请选择仓库', trigger: 'blur' }],
        LaneId: [{ required: true, message: '请选择巷道', trigger: 'blur' }],
        Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        Code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
        Type: [{ required: true, message: '请选择类型', trigger: 'blur' }]
      }, // 新建物料表单规则
      opdrawer: false, // 关联物料dialog
      glwuliao: '', // 关联物料下拉菜单双向绑定input
      wuliaoData: [{}], // 关联物料表格
      rowid: '', // 获取点击关联物料的id
      wuliaoDialog: false, // 添加关联物料dialog
      materielname: '', // 添加关联物料输入编号
      materielnumber: '', // 添加关联物料输入编码
      guanlianwuliaoData: [{}], // 添加关联物料表格
      wuliaoType: [{}], // 关联物料选择类型
      defaultProps: {
        children: 'children',
        label: 'Text'
      }, // 树形子类型
      Text: '',
      newvalue: '', // 选择的最新的Id
      delglDialog: false, // 删除的dialog框
      pointid: '', // 删除的id
      MaterialId: '' // 选择的id
    }
  },
  created() {
    this.getCangkuList()
    this.getPiontList()
    this.gettype()
  },
  methods: {
    // 获取上下料点表格数据
    async getPiontList() {
      const res = await getPiontList(this.tableValue)
      console.log('table', res)
      this.tableData = res
    },
    // 获取仓库列表
    async getCangkuList() {
      const res = await getWarehouseList()
      console.log('仓库列表', res)
      this.cangkulist = res
    },
    // 获取表格选择的数据
    handleSelectionChange(value) {
      console.log('表格选择的数据', value)
      this.arr = value
    },
    // 启用
    open(row) {
      console.log(row)
      this.openId = row.Id
      this.opendialog = true
      this.openType = !row.IsEnable
    },
    // 取消启用
    close() {
      this.opendialog = false
    },
    // 确定启用
    async isok() {
      await getEnable({ id: this.openId, enable: this.openType })
      // this.$message.success('启用成功')
      this.getPiontList()
      this.close()
      this.$message.success('操作成功')
    },
    // 停用
    stopthis(row) {
      this.stopId = row.Id
      this.stopdialog = true
      this.stopType = !row.IsEnable
    },
    // 取消停用
    colsestop() {
      this.stopdialog = false
    },
    // 确定停用
    async isyes() {
      await getEnable({ id: this.stopId, enable: this.stopType })
      // this.$message.success('启用成功')
      this.getPiontList()
      this.colsestop()
      this.$message.success('操作成功')
    },
    // 新建打开dialog
    addtable() {
      this.showDialog = true
    },
    // 获取上下料点类型
    async gettype() {
      const res = await getType(this.tableValue)
      console.log('类型', res.EnumItems)
      this.typeList = res.EnumItems
    },
    // 获取仓库id
    async loloid(value) {
      console.log(value)
      this.selectStoryId = value
      const res = await getHall({ storId: this.selectStoryId })
      console.log('巷道', res)
      this.hallList = res
    },
    // 取消新增
    closeDialog() {
      this.$refs.formLabelAlign.resetFields()
      this.showDialog = false
      // this.$message.info('已取消新增')
    },
    // 新增上下料点
    save() {
      this.$refs.formLabelAlign.validate(async(valid) => {
        if (valid) {
          if (this.formLabelAlign.id !== '') {
            console.log(this.formLabelAlign)
            await editPoint(this.formLabelAlign)
            this.$message.success('编辑成功')
          } else {
            await addPoint(this.formLabelAlign)
            this.$message.success('新增成功')
          }
          this.getPiontList()
          this.closeDialog()
        } else {
          console.log('error submit!!')
        }
      })
    },
    // 查询上下物料
    async inquire() {
      console.log(this.tableValue)
      this.tableValue.search.storId = this.cangku
      this.tableValue.search.keyword = this.name
      this.tableValue.search.type = this.pointtype
      const res = await findPoint(this.tableValue)
      console.log(res)
      this.tableData = res
      this.$message.success('操作成功')
    },
    // 重置下拉菜单
    clearthis() {
      this.cangku = ''
      this.name = ''
      this.pointtype = ''
    },
    // 删除上下料点
    del(row) {
      console.log('删除', row)
      this.deldialog = true
      this.delId = row.Id
    },
    // 关闭删除Dialog
    colsedel() {
      this.deldialog = false
    },
    async delyes() {
      await delPoint([this.delId])
      this.getPiontList()
      this.colsedel()
      this.$message.success('删除成功')
    },
    // 编辑上下料点/89
    async edit(row) {
      console.log(row)
      const id = row.Id
      this.showDialog = true
      const res = await getTheData({ id })
      console.log('编辑', res)
      this.formLabelAlign = { ...res }
    },
    // 打开关联物料dialog
    async aboutwl(row) {
      console.log('打开关联物料', row)
      this.opdrawer = true
      this.rowid = row.Id
      const res = await getMaterial({ pageIndex: this.tableValue.pageIndex, pageRows: this.tableValue.pageRows, pointId: this.rowid, sortField: 'MaterialId', SortType: 'asc' })
      // console.log('关联物料', res)
      this.wuliaoData = res
      console.log('关联物料', this.wuliaoData)
    },
    // 添加关联物料
    async addglwl() {
      this.wuliaoDialog = true
      const res = await getWuliaoType()
      this.wuliaoType = res
    },
    // 树形
    handleNodeClick(node) {
      console.log('sadasd', node)
      this.Text = node.Text
      this.newvalue = node.Id
      console.log('newValye', this.newvalue)
      this.$refs.selectTree.blur()
    },
    // 获取选择数据
    SelectionChange(val) {
      console.log('val', val)
      this.selectId = val[0].Id
      console.log('selectId', this.selectId)
    },
    // 获取物料查询列表
    async wuliaofind() {
      const res = await getQueryList({ pageIndex: this.pageIndex, pageRows: this.pageSize, search: { typeId: this.newvalue, contactName: this.materielname, keyword: this.materielnumber }})
      console.log('查询列表', res)
      this.guanlianwuliaoData = res
    },
    // 重置物料框
    reset() {
      this.Text = ''
      this.materielname = ''
      this.materielnumber = ''
    },
    // 取消
    closeThis() {
      this.wuliaoDialog = false
    },
    // 新增关联物料
    async addthetb() {
      console.log('新增关联物料')
      const obj = { id: this.rowid, keys: [this.selectId] }
      await addMaterial(obj)
      const res = await getMaterial({ pageIndex: this.tableValue.pageIndex, pageRows: this.tableValue.pageRows, pointId: this.rowid, sortField: 'MaterialId', SortType: 'asc' })
      // console.log('关联物料', res)
      this.wuliaoData = res
      this.closeThis()
    },
    // 查询关联物料
    async findglwuliao() {
      const res = await findMaterial({ pageIndex: this.pageIndex, pageRows: this.pageSize, search: { materialName: this.materielname }, sortField: 'MaterialId', SortType: 'asc' })
      this.wuliaoData = res
    },
    // 重置物料
    delglwuliao() {
      this.glwuliao = ''
    },
    // 删除关联物料
    closedelDialog() {
      this.delglDialog = false
    },
    deldia(row) {
      this.delglDialog = true
      console.log('删除关联物料', row)
      this.pointid = row.PointId
      this.MaterialId = row.MaterialId
    },
    async delglwl() {
      await delMaterial({ PointId: this.pointid, select: [this.MaterialId] })
      const res = await getMaterial({ pageIndex: this.tableValue.pageIndex, pageRows: this.tableValue.pageRows, pointId: this.rowid, sortField: 'MaterialId', SortType: 'asc' })
      // console.log('关联物料', res)
      this.wuliaoData = res
      this.$message.success('删除成功')
      this.closedelDialog()
    }
  }
}

</script>
<style scoped>
.continal{
  margin-top:100px ;
  margin-left:80px;
}
.isno{
  color: #eb2f96;
  width: 30px;
  position: absolute;
  height: 25px;
  left: 20px;
  border: 1px solid #Eb2F96;
  border-radius:4px;
  text-align: center;
  font-size: 12px;
  background:#fff0f6
}
.isyes{
  color: #52c41a;
  width: 30px;
  position: absolute;
  height: 25px;
  left: 20px;
  border-color: #b7eb8f;
  border-radius:4px;
  text-align: center;
  font-size: 12px;
  background: #f6ffed;
}
.contia {
  margin-top:20px ;
  margin-left:40px;
}
</style>
